<template applyTalent>
  <a-modal width="700px" :title="type === 1 ? '达人探店费用请款' : '达人探店费用请款详情'" :visible="value" :maskClosable="false" @cancel="onCancel">
    <a-spin tip="提交中..." :spinning="isSubLoading">
      <a-form-model ref="applyModalForm" :model="applyModalForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-model-item label="请款类型" prop="type" :rules="[{ required: true, trigger: 'change', message: '请选择请款类型' }]">
          <a-radio-group v-model="applyModalForm.type" :disabled="type === 2">
            <a-radio :value="1">
              CPS+一口价
            </a-radio>
            <a-radio :value="2">
              一口价
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="业务经办人" prop="businessUserId" :rules="[{ required: true, message: '请选择业务经办人', trigger: 'blur' }]">
          <a-select
            @search="getAllUserFun"
            :disabled="type === 2"
            v-model="applyModalForm.businessUserId"
            :showArrow="false"
            style="width:240px;"
            show-search
            :filter-option="false"
            allow-clear
            placeholder="请输入姓名/工号搜索"
          >
            <a-spin v-if="userLoading" slot="notFoundContent" size="small" />
            <a-select-option v-for="(item, index) in allUser" :key="index" :value="item.userId">{{ item.userName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <div class="form-one" :style="{ paddingTop: type === 2 ? '0' : '15px' }" v-for="(item, index) in applyModalForm.agentShopInfoDataList" :key="index">
          <div class="form-one-item" :style="{ background: type === 2 ? 'none' : '#f5f5f5', paddingTop: type === 2 ? '0' : '10px' }">
            <a-form-model-item label="达人昵称" :prop="'agentShopInfoDataList.' + index + '.agentName'">
              <a-input v-model="item.agentName" :disabled="type === 2" style="width:240px;" placeholder="请输入达人昵称"></a-input>
            </a-form-model-item>
            <a-form-model-item
              label="达人抖音号"
              :prop="'agentShopInfoDataList.' + index + '.dyNo'"
              :rules="[
                { required: true, trigger: 'blur', message: '请输入达人抖音号' },
                {
                  pattern: /^[a-zA-Z0-9_.]*$/,
                  message: '抖音号格式有误',
                  trigger: 'blur'
                }
              ]"
            >
              <a-input v-model="item.dyNo" :disabled="type === 2" style="width:240px;" placeholder="请输入主播抖音号"></a-input>
            </a-form-model-item>
            <a-form-model-item label="抖音粉丝量" :prop="'agentShopInfoDataList.' + index + '.fans'">
              <a-input v-model="item.fans" :disabled="type === 2" style="width:240px;" placeholder="请输入抖音粉丝量"></a-input>
            </a-form-model-item>
            <a-form-model-item label="账户类型" :prop="'agentShopInfoDataList.' + index + '.bankType'" :rules="[{ required: true, trigger: 'change', message: '请输入选择账户类型' }]">
              <a-radio-group v-model="item.bankType" :disabled="type === 2">
                <a-radio :value="1">
                  对私
                </a-radio>
                <a-radio :value="2">
                  对公
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item
              label="开户行"
              v-if="item.bankType === 2"
              :prop="'agentShopInfoDataList.' + index + '.bankName'"
              :rules="[{ required: true, trigger: 'blur', message: '请输入银行开户行支行' }]"
            >
              <a-input v-model="item.bankName" :disabled="type === 2" style="width:240px;" placeholder="请输入银行开户行支行"></a-input>
            </a-form-model-item>
            <a-form-model-item label="开户人姓名" :prop="'agentShopInfoDataList.' + index + '.accountName'" :rules="[{ required: true, trigger: 'blur', message: '请输入银行卡账号所属人姓名' }]">
              <a-input v-model="item.accountName" :disabled="type === 2" style="width:240px;" placeholder="请输入银行卡账号所属人姓名"></a-input>
            </a-form-model-item>
            <a-form-model-item
              label="银行账号"
              :prop="'agentShopInfoDataList.' + index + '.cardNumber'"
              :rules="[
                { required: true, trigger: 'blur', message: '请输入银行账号' },
                {
                  pattern: /^[0-9]*$/,
                  message: '银行账号需为数字',
                  trigger: 'blur'
                }
              ]"
            >
              <a-input v-model="item.cardNumber" :disabled="type === 2" style="width:240px;" placeholder="请输入银行账号"></a-input>
            </a-form-model-item>
            <a-form-model-item
              label="身份证号"
              :prop="'agentShopInfoDataList.' + index + '.idCard'"
              :rules="[
                { required: true, trigger: 'blur', message: '请输入身份证号' },
                {
                  pattern: /^[a-zA-Z0-9_]*$/,
                  message: '身份证格式有误',
                  trigger: 'blur'
                },
                { min: 0, max: 18, message: '超出身份证号长度', trigger: 'blur' }
              ]"
            >
              <a-input v-model="item.idCard" :disabled="type === 2" style="width:240px;" placeholder="请输入身份证号"></a-input>
            </a-form-model-item>
            <a-form-model-item label="合同签约主体" :prop="'agentShopInfoDataList.' + index + '.company'" :rules="[{ required: true, trigger: 'change', message: '请选择合同签约主体' }]">
              <a-radio-group v-model="item.company" :disabled="type === 2">
                <a-radio :value="1">
                  玩聚畅享
                </a-radio>
                <a-radio :value="2">
                  永创
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <div class="form-two">
              <div class="form-two-text"><span class="remind-dian">*</span>产品套餐ID :</div>
              <div class="form-two-wapper">
                <div v-for="(childItem, childIndex) in item.productIdAndDyNoList" :key="childIndex" class="form-two-wapper-item">
                  <div class="form-two-item" :style="{ paddingTop: type === 2 ? '0' : '10px' }">
                    <a-row>
                      <a-col :span="12">
                        <a-form-model-item
                          label=""
                          :prop="'agentShopInfoDataList.' + index + '.productIdAndDyNoList.' + childIndex + '.productItemId'"
                          :rules="[{ required: true, trigger: 'blur', message: '请输入请款的套餐ID' }]"
                          :label-col="{ span: 0 }"
                          :wrapper-col="{ span: 24 }"
                        >
                          <a-input v-model="childItem.productItemId" :disabled="type === 2" type="number" placeholder="请款的套餐ID" :max-length="20" style="width: 150px" />
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-model-item
                          label=""
                          :prop="'agentShopInfoDataList.' + index + '.productIdAndDyNoList.' + childIndex + '.itemMoney'"
                          :rules="[
                            { required: true, trigger: 'blur', message: '请输入套餐请款金额' },
                            {
                              pattern: /^\d+(\.\d+)?$/,
                              message: '金额格式有误',
                              trigger: 'blur'
                            }
                          ]"
                          :label-col="{ span: 0 }"
                          :wrapper-col="{ span: 24 }"
                        >
                          <a-input
                            @blur="(e) => itemMoneyBlur(e, index, childIndex, 'agentShopInfoDataList.' + index + '.productIdAndDyNoList.' + childIndex + '.itemMoney')"
                            :value="childItem.itemMoney ? (childItem.itemMoney / 100).toFixed(2) : ''"
                            :disabled="type === 2"
                            placeholder="套餐请款金额"
                            :max-length="15"
                            style="width: 150px"
                          />
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                    <a-row v-if="type === 1">
                      <span style="font-size:12px;color:red;">注：产品套餐ID，不能重复填写！</span>
                    </a-row>
                    <a-form-model-item
                      :label-col="{ span: 0 }"
                      :wrapper-col="{ span: 24 }"
                      :prop="'agentShopInfoDataList.' + index + '.productIdAndDyNoList.' + childIndex + '.typeList'"
                      :rules="[{ required: true, trigger: 'change', message: '请选择类型' }]"
                    >
                      <a-checkbox-group :disabled="type === 2" v-model="childItem.typeList">
                        <a-row>
                          <a-col :span="6">
                            <a-checkbox :value="1">全款</a-checkbox>
                          </a-col>
                          <a-col :span="6">
                            <a-checkbox :value="2">首款</a-checkbox>
                          </a-col>
                          <a-col :span="6">
                            <a-checkbox :value="3">尾款</a-checkbox>
                          </a-col>
                          <a-col :span="6">
                            <a-checkbox :value="4">其他</a-checkbox>
                          </a-col>
                        </a-row>
                      </a-checkbox-group>
                    </a-form-model-item>
                    <a-form-model-item
                      v-if="(childItem.contactUrl.length > 0 && type === 2) || type === 1"
                      label="合同"
                      :prop="'agentShopInfoDataList.' + index + '.productIdAndDyNoList.' + childIndex + '.contactUrl'"
                      :rules="[{ required: true, trigger: ['change', 'blur'], message: '请上传达运主管审批探店通过截图+合同附件' }]"
                      :label-col="{ span: 0 }"
                      :wrapper-col="{ span: 24 }"
                    >
                      <upload :limit="10" v-model="childItem.contactUrl" v-if="type === 1"></upload>
                      <upload :limit="childItem.contactUrl.length || 0" :disabled="true" v-else :value="childItem.contactUrl"></upload>
                      <div class="image-remind upload1" v-if="type === 1">注：请上传达运主管审批探店通过截图+合同附件</div>
                    </a-form-model-item>
                  </div>
                  <a-button type="primary" shape="circle" @click="dealChildValue('add', index, childIndex)" size="small" icon="plus" v-if="childIndex === 0 && type === 1" />
                  <a-button type="primary" shape="circle" @click="dealChildValue('del', index, childIndex)" size="small" icon="delete" v-else-if="type === 1" />
                </div>
              </div>
            </div>
          </div>
          <a-button type="primary" size="small" v-if="index === 0 && type === 1" @click="dealAllValues('add', index)"><a-icon type="plus-circle" /> 新增</a-button>
          <a-button type="primary" size="small" v-else-if="type === 1" @click="dealAllValues('del', index)"><a-icon type="delete" /> 删除</a-button>
        </div>
      </a-form-model>
    </a-spin>
    <!-- 操作 -->
    <template slot="footer">
      <template style="display:flex;justify-content: center;">
        <a-button @click="onCancel">关闭</a-button>
        <a-button v-show="type === 1" type="primary" style="background:#1D6FE9" @click="submitApply">提交申请</a-button>
      </template>
    </template>
  </a-modal>
</template>
<script>
import upload from '@/components/upload/upload'
import { getAllUserList, agentShopApply } from '@/service'
import debounce from 'lodash/debounce'
const g = function(row = {}) {
  return {
    type: row.type || 1,
    businessUserId: row.businessUserId ? String(row.businessUserId) : undefined,
    agentShopInfoDataList: row.agentShopInfoDataList || [gChild()]
  }
}
const gChild = function(item = {}) {
  return {
    accountName: item.accountName || '',
    agentName: item.agentName || '',
    fans: String(item.fans) ? item.fans : '',
    bankName: item.bankName || '',
    bankType: item.bankType || 1,
    cardNumber: item.cardNumber || '',
    company: item.company ? item.company : 1,
    idCard: item.idCard || '',
    dyNo: item.dyNo || '',
    productIdAndDyNoList: item.agentShopProductRefDataList ? item.agentShopProductRefDataList : item.productIdAndDyNoList || [gchildChild()]
  }
}

const gchildChild = function(childItem = {}) {
  return {
    productItemId: childItem.productItemId || '',
    itemMoney: childItem.itemMoney ? childItem.itemMoney : '',
    typeList: childItem.typeList || [],
    contactUrl: childItem.contactUrl && childItem.contactUrl !== null ? childItem.contactUrl : [] || []
  }
}
export default {
  name: 'applyTalent',
  props: {
    type: {
      type: Number,
      default: 0
    },
    value: {
      type: Boolean,
      default: false
    },
    getInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    getInfo(val) {
      if (val && Object.keys(val).length > 0) {
        const { type, businessUserName } = val
        const detailInfo = {
          type,
          businessUserId: businessUserName,
          agentShopInfoDataList: [gChild(val)]
        }
        detailInfo.agentShopInfoDataList[0].productIdAndDyNoList = detailInfo.agentShopInfoDataList[0].productIdAndDyNoList.map((item) => {
          return gchildChild(item)
        })
        console.log(detailInfo)
        this.applyModalForm = detailInfo
      }
    }
  },
  components: { upload },
  data() {
    this.getAllUserFun = debounce(this.getAllUserFun, 800)
    return {
      userLoading: false,
      allUser: [],
      applyModalForm: g(),
      isSubLoading: false,
      warningShow: false
    }
  },
  methods: {
    getAllUserFun(keywords) {
      return new Promise((resolve, reject) => {
        keywords = keywords.replace(/ /g, '')
        // if (!keywords) return reject(new Error('process'))
        this.userLoading = true
        getAllUserList({ keywords })
          .then((res = {}) => {
            const { records = [] } = res
            this.allUser = records
            resolve(res)
          })
          .catch(() => {
            return reject(new Error('接口出错'))
          })
          .finally(() => {
            this.userLoading = false
          })
      })
    },
    onCancel() {
      this.$emit('input', false)
      this.applyModalForm = g({})
      this.clearForm()
    },
    clearForm() {
      let form = this.$refs.applyModalForm
      if (form && form.clearValidate) {
        this.$nextTick(() => {
          form.clearValidate()
        })
      }
    },
    itemMoneyBlur(e, index, childIndex, name) {
      const { value = '' } = e.target || {}
      if (value && value !== '0') {
        this.$set(this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList[childIndex], 'itemMoney', value * 100)
        // this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList[childIndex].itemMoney = value * 100
      } else {
        this.$set(this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList[childIndex], 'itemMoney', '')
        // this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList[childIndex].itemMoney = ''
      }
      this.$refs.applyModalForm.validateField(name)
    },
    // 增删所有数据
    dealAllValues(type = '', index) {
      let addAllObj = gChild()
      let listLength = this.applyModalForm.agentShopInfoDataList.length || 0
      if (type === 'add') {
        if (listLength < 5) {
          this.applyModalForm.agentShopInfoDataList.push(addAllObj)
        } else {
          this.$messageSend.error('一次最多只能提交5条主播数据')
        }
      } else if (type === 'del') {
        this.applyModalForm.agentShopInfoDataList.splice(index, 1)
      }
    },
    // 增删套餐数据
    dealChildValue(type = '', index = 0, childIndex = 0) {
      let addChildObj = gchildChild()
      let listLength = this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList.length || 0
      if (type === 'add') {
        if (listLength < 5) {
          this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList.push(addChildObj)
        } else {
          this.$messageSend.error('一次最多只能添加5条套餐数据')
        }
      } else if (type === 'del') {
        this.applyModalForm.agentShopInfoDataList[index].productIdAndDyNoList.splice(childIndex, 1)
      }
    },
    submitApply() {
      this.$refs.applyModalForm.validate((valid, obj = {}) => {
        if (valid) {
          this.isSubLoading = true
          agentShopApply(this.applyModalForm)
            .then((res) => {
              this.$emit('callback')
              this.onCancel()
            })
            .finally(() => {
              this.isSubLoading = false
            })
            .catch(() => {
              this.isSubLoading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
}
.ant-form-item {
  margin-bottom: 0;
}
.ant-form-item-control {
  width: 100%;
}
</style>
<style scoped lang="scss">
.image-remind {
  color: #666;
  font-size: 12px;
  height: 20px;
  margin-top: -15px;
}
.upload1 {
  position: relative;
  top: -10px;
}
.upload2 {
  margin-top: 0;
  position: relative;
  top: -10px;
}
.form-one,
.form-two {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  padding: 15px;
  &-item {
    background: #f5f5f5;
    width: calc(100% - 70px);
    border-radius: 10px;
    padding-top: 10px;
  }
}
.form-two {
  margin: 0 10px 10px;
  padding-right: 10px;
  flex-wrap: wrap;
  &-text {
    width: 90px;
  }
  &-wapper {
    width: calc(100% - 100px);
    &-item {
      display: flex;
      justify-content: space-between;
    }
  }
  &-item {
    background: #fff;
    padding: 10px;
    margin-bottom: 5px;
    width: calc(100% - 30px);
  }
}
.remind-dian {
  margin-right: 5px;
  color: #f00;
}
</style>
